<template>
  <div class="xh">
    <!-- 订单号详情 -->
    <el-dialog
      title="订单详情"
      :visible.sync="dialogDetail"
      width="612px">
      <div class="div_flex_row">
        <div class="text_width" style="width: 20%;">
          <p style="border-top: 1px solid  rgba(57, 68, 78, 0.1);" class="left_background">
            <span>订单号</span>
          </p>
          <p class="left_background">
            <span>时间</span></p>
          <p class="left_background">
            <span>操作者</span>
          </p>
          <p class="left_background">
            <span>操作者ID</span>
          </p>
          <p class="left_background">
            <span>类型</span>
          </p>
          <p class="left_background">
            <span>状态</span>
          </p>
          <p class="left_background" v-if="rowData.del === 1||rowData.del === 0">
            <span>渠道订单号</span>
          </p>
          <p class="left_background" v-if="rowData.del === 2||rowData.del === 3">
            <span>广告系列</span>
          </p>
          <p class="left_background" v-if="rowData.del === 2||rowData.del === 3">
            <span>广告系列ID</span>
          </p>
          <p class="left_background">
            <span>渠道</span>
          </p>
          <p class="left_background">
            <span>金额</span>
          </p>
          <p class="left_background">
            <span>可用余额</span>
          </p>
        </div>
        <div class="text_width"  style="width: 80%;">
          <p style="border-top: 1px solid  rgba(57, 68, 78, 0.1);color: #24BEBE" class="left_border">
            <span>{{rowData.orderId}}</span>
          </p>
          <p class="left_border">
            <span>{{rowData.createAt}}</span>
          </p>
          <p class="left_border">
            <span>{{rowData.nick_name}}</span>
          </p>

          <p class="left_border">
            <span>{{rowData.userId}}</span>
          </p>
          <p class="left_border">
            <span v-if="rowData.del === 0">充值</span>
            <span v-else-if="rowData.del === 1">提现</span>
            <span v-else-if="rowData.del === 2">创建广告</span>
            <span v-else-if="rowData.del === 3">追加预算</span>
            <span v-else-if="rowData.del === 4">余额解冻</span>
          </p>
          <p class="left_border">
            <!-- //充值 -->
            <span v-if="rowData.status === '0' && rowData.del === 0">失败</span>
            <span v-if="rowData.status === '1' && rowData.del === 0">成功</span>
            <!-- //提现 -->
            <span v-if="rowData.status === '0' && rowData.del === 1">审批中</span>
            <span v-if="rowData.status === '1' && rowData.del === 1">同意</span>
            <span v-if="rowData.status === '2' && rowData.del === 1">拒绝</span>
            <span v-if="rowData.status === '3' && rowData.del === 1">提现失败，请检查账号或收款人</span>
            <span v-if="rowData.status === '4' && rowData.del === 1">删除</span>
            <span v-if="rowData.status === '5' && rowData.del === 1">隐藏</span>
            <!--创建广告-->
            <span v-if="rowData.status === '0' && rowData.del === 2">失败</span>
            <span v-if="rowData.status === '1' && rowData.del === 2">成功</span>
            <!-- 追加预算 -->
            <span v-if="rowData.status === '0' && rowData.del === 3">失败</span>
            <span v-if="rowData.status === '1' && rowData.del === 3">成功</span>
            <!-- 余额解冻 -->
            <span v-if="rowData.status === '0' && rowData.del === 4">失败</span>
            <span v-if="rowData.status === '1' && rowData.del === 4">成功</span>
          </p>
          <p class="left_border" v-if="rowData.del === 0||rowData.del === 1">
            <span v-if="rowData.trade_no">{{rowData.trade_no}}</span>
            <span v-else>-</span>
          </p>
          <p class="left_border" v-if="rowData.del === 2||rowData.del === 3">
            <span v-if="rowData.campaign_name">{{rowData.campaign_name}}</span>
            <span v-else>-</span>
          </p>
          <p class="left_border" v-if="rowData.del === 2||rowData.del === 3">
            <span v-if="rowData.campaign_id">{{rowData.campaign_id}}</span>
            <span v-else>-</span>
          </p>
          <p class="left_border">
            <span v-if="rowData.channel === 0">支付宝</span>
            <span v-else-if="rowData.channel === 1">余额</span>
          </p>
          <p class="left_border">
            {{isSymol}}
            <countTo :start-val="0" :decimals="2" :end-val="Number(rowData.recharge)" :duration="1"></countTo>
          </p>
          <p class="left_border">
              {{isSymol}}
              <countTo :start-val="0" :decimals="2" :end-val="Number(rowData.balance)" :duration="1"></countTo>
          </p>
        </div>
      </div>
    </el-dialog>
    <el-table :data="czData" stripe style="width:100%;" :header-cell-class-name="headerStyle">
      <el-table-column label="时间" prop="createAt" width="200"></el-table-column>
      <!-- <el-table-column label="操作者ID" prop="userId"  width="120"></el-table-column> -->
      <el-table-column label="操作者" prop="nick_name" width="120"></el-table-column>
      <el-table-column label="类型" width="140">
        <template slot-scope="scope">
          <span v-if="scope.row.del === 0">充值</span>
          <span v-else-if="scope.row.del === 1">提现</span>
          <span v-else-if="scope.row.del === 2">创建广告</span>
          <span v-else-if="scope.row.del === 3">追加预算</span>
          <span v-else-if="scope.row.del === 4">余额解冻</span>
        </template>
      </el-table-column>
      <el-table-column label="渠道" width="140">
        <template slot-scope="scope">
           <span v-if="scope.row.channel === 0">支付宝</span>
           <span v-else-if="scope.row.channel === 1">余额</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status==='0' && scope.row.del === 0">失败</span>
          <span v-if="scope.row.status==='1' && scope.row.del === 0">成功</span>
          <span v-if="scope.row.status==='0' && scope.row.del === 1">审批中</span>
          <span v-if="scope.row.status==='1' && scope.row.del === 1">同意</span>
          <span v-if="scope.row.status==='2' && scope.row.del === 1">拒绝</span>
          <span v-if="scope.row.status==='3' && scope.row.del === 1">提现失败，请检查账号或收款人</span>
          <span v-if="scope.row.status==='4' && scope.row.del === 1">删除</span>
          <span v-if="scope.row.status==='5' && scope.row.del === 1">隐藏</span>
          <span v-if="scope.row.status === '0' && scope.row.del === 2">失败</span>
          <span v-if="scope.row.status === '1' && scope.row.del === 2">成功</span>
          <span v-if="scope.row.status === '0' && scope.row.del === 3">失败</span>
          <span v-if="scope.row.status === '1' && scope.row.del === 3">成功</span>
          <span v-if="scope.row.status === '0' && scope.row.del === 4">失败</span>
          <span v-if="scope.row.status === '1' && scope.row.del === 4">成功</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号">
        <template slot-scope="scope">
          <div  class="orderId_click">
            <span @click="openDialog(scope.row)">{{scope.row.orderId}}</span>
          </div>
          <!-- <span>{{scope.row.orderId}}</span> -->
        </template>
      </el-table-column>
      <el-table-column align="right" label="金额">
        <template slot-scope="scope">
          <div style="text-align:right;">
            {{ isSymol }}<countTo :start-val="0" :decimals="2" :end-val="Number(scope.row.recharge)" :duration="1" class="num"></countTo>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="可用余额" align="right">
        <template slot-scope="scope">
           <div style="text-align:right;">
           {{ isSymol }}<countTo :start-val="0" :decimals="2" :end-val="Number(scope.row.balance)" :duration="1" class="num"></countTo>
          </div>

        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="czTotal"
      @pageSize="changePageSize"
      @page="changePage"
      :page="czPage"
      :pageSize="czPageSize"
    ></pagination>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
import cellHeader from '@/components/cell-header.vue'
import { topHistory } from "@/api/finace.js";
import pagination from '@/components/elementComponents/pagination.vue'
export default {
  name: "Cz",
  components: {
    pagination,
    countTo,
    cellHeader
  },
  props:{
    timeArray: {
      type: Array,
        default: (res) => {
        return
      }
    }
  },
  data() {
    return {
      dialogDetail: false,
      czData: '',
      czPageSize: 10,
      czTotal: 0,
      czPage: 1,
      rowData: ''
    };
  },
  computed: {
    type() {
      return this.$store.state.user.unit;
    },
    isSymol() {
      return this.$store.state.user.unit === 'USD' ? '$' : '￥'
    },
    teamId() {
      return this.$store.state.team.teamId
    }
  },
  watch: {
    czPage(newV,oldV){
      this.czPage = newV
      this.getTopHistory()
    },
    czPageSize(newV,oldV){
      this.czPageSize = newV
      this.getTopHistory()
    },
    timeArray: {
      handler: function(newV, oldV) {
        this.timeArray = newV
        this.czPageSiz = 10
        this.czPage = 1
        this.getTopHistory()
      }
    },
    type: {
      handler: function(newV, oldV) {
        this.getTopHistory()
        return newV
      }
    },
    teamId: {
      deep: true,
      handler: function(newV,oldV) {
        this.teamId = newV
        this.getTopHistory()
      }
    }
  },
  mounted() {
    this.getTopHistory()
  },
  methods: {
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 6) {
         return 'right-align'
      }
    },
     // 订单详情
    openDialog(data) {
      this.dialogDetail = true
      if (data.campaign_name) {
          if (data.campaign_name.indexOf('_3YData_') !== -1) {
              let str = data.campaign_name
              let first = str.indexOf('_') + 1
              let gang = str.indexOf('_', first)
              data.campaign_name = str.substring(gang).substring(1,str.length)
        }
      }
    this.rowData = data
    },
    // 获取一页数量
    changePageSize(data) {
      this.czPageSize = data
    },
    // 获取页数
    changePage(data) {
      this.czPage = data
    },
    // 获取所有充值
    async getTopHistory() {
      let data = {
        page: this.czPage,
        size: this.czPageSize,
        type: this.type,
        startTime: this.timeArray[0],
        endTime: this.timeArray[1],
        campaign_id: '',
        teamId: this.teamId
      };
      const res = await topHistory(data);
      if (res.data.code === 20000) {
        this.czData = res.data.data.list;
        this.czTotal = res.data.data.total;
        this.$forceUpdate()
      }
    },
  }
};
</script>

<style lang="scss" scoped>
 @import "~@/styles/variables.scss";
.orderId_click {
  cursor: pointer;
  color: $mainColor1;
}
.num{
  margin-left: -5px;
}
.xh_data {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  top: 2px;
}
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.div_flex_row {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 10px;
  .text_width {
    font-size: 14px;
    font-family: PingFang SC !important;
    p{
      border-bottom: 1px solid  rgba(57, 68, 78, 0.1);
      border-left: 1px solid  rgba(57, 68, 78, 0.1);
      border-right: 1px solid  rgba(57, 68, 78, 0.1);
      height: 46px;
      display: flex;
      align-items: center;
    }
    .left_border {
      border-left: 0px solid  rgba(57, 68, 78, 0.1);;
      text-align: right;
      justify-content: flex-end;
      color: rgba(51, 64, 74, 0.8);
      span {
        margin-right: 15px;
      }
    }
    .left_background {
      font-weight: 500;
      color: #39444E;
      background: #f7f7f9;
      font-family: "PingFangSC-Medium", PingFangSC, sans-serif !important;
      span {
        margin-left: 15px;
      }
    }
  }
}

</style>
